<template>
  <div class="default-main ba-table-box">
    <el-alert
      class="ba-table-alert"
      v-if="baTable.table.remark"
      :title="baTable.table.remark"
      type="info"
      show-icon
    />

    <!-- 表格顶部菜单 -->
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      :quick-search-placeholder="placeholder"
      @action="baTable.onTableHeaderAction"
    />
    <!-- 表格 -->
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table @action="baTable.onTableAction" />
  </div>
</template>
<script setup lang="ts">
import _ from "lodash";
import { ref, provide, onMounted, inject } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, buildJsonToElTreeData } from "@/utils/common"; // 导入表格api方法生成器
import { BusinessLedger } from "@/api/backend/index";
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useLedger } from "@/store/backend/BusinessM/ledger";
import { useAdminInfo } from "@/store/adminInfo";
import { useLedgerFile } from "@/store/backend/BusinessM/file";

const ledger = useLedger();
const file = useLedgerFile();
const placeholder = ref<string>("通过标题模糊搜索");
const tableRef = ref();
const router = useRouter();
const adminInfo = useAdminInfo();
const { proxy } = useCurrentInstance();
const navTabs = inject("navTabs") as any;
const route = useRoute();

// let optButtons: OptButton[] = [
//   {
//     render: "tipButton",
//     name: "info",
//     title: "info",
//     text: "",
//     type: "primary",
//     icon: "fa fa-search-plus",
//     class: "table-row-edit",
//     disabledTip: false,
//   },
// ];

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + BusinessLedger)
      ? (navTabs as any).pageSizeMap.get(route.path + BusinessLedger)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(
  new baTableApi(BusinessLedger), //this.api = api操作日志相关
  {
    pk: "id",
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("orderNumber"),
        label: "序号",
        prop: "orderNumber",
        align: "center",
        width: 90,
        operator: false,
      },
      {
        show: filedShowOff("fileName"),
        label: "材料名称",
        prop: "fileName",
        align: "center",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("isNecessary"),
        label: "状态",
        prop: "isNecessary",
        align: "center",
        render: "tag",
        custom: { "0": "info", "1": "danger" },
        replaceValue: {
          "0": "辅助",
          "1": "必备",
        },
        width: 100,
      },
      // { label: '操作信息', prop: 'msg', align: 'center', operator: 'LIKE', operatorPlaceholder: '模糊搜索' },
      {
        label: "操作",
        align: "center",
        width: "140",
        render: "buttons",
        buttons: [
          {
            render: "query",
            name: "query", //台账查询单独权限
            title: "详情",
            text: "",
            type: "primary",
            icon: "iconfont icon-chaxunyujisuan",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
        operator: false,
      },
    ],
    filter: {
      pageNum: 1,
      pageSize: pageSizeKeep(),
    },
    acceptQuery: false,
  },
  {}
);

const emit = defineEmits(["on-showPriceList"]);

/** 点击查看详情按钮响应 */
const infoButtonClick = (row: any) => {
  console.log("危废台账", "row", row);
  //将row数据传递给文件表单
  emit("on-showPriceList", row);
  file.$state.orderId = row.id; //将目录id与orderId关联
  proxy.eventBus.emit("changeFileId", row.id);
};

provide("baTable", baTable);
onMounted(() => {
  //全局事件总线
  const { proxy } = useCurrentInstance();
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(BusinessLedger);
  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      if (!baTable.activate) return;
      if (data.name == "query") {
        infoButtonClick(data.row);
      }
    }
  );
});
</script>
<style lang="scss" scoped>
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}

.ceshi {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
}
</style>
